<template>
  <div class="container">
    <div class="row1">
      <div>物联感知</div>
      <div>AI智能</div>
    </div>

    <div class="row2">
      <div>
        <div>今日接警数</div>
        <div>12</div>
        <div>监测设备数量<span>29173</span></div>
      </div>
      <div>
        <img src="./imgs/l-5.png" alt="" />
        <div>报警监测</div>
      </div>
      <div>
        <div>今日接警数</div>
        <div>0</div>
      </div>
    </div>

    <div class="row3">
      专项报警分析
    </div>

    <div class="row4">
      <div class="select">
        <el-select v-model="currentOpt" :popper-append-to-body="false" @change="selectChange">
          <el-option v-for="(value, index) of selectOptions" :key="index" :label="value" :value="value"></el-option>
        </el-select>
      </div>
      <div class="chart-content" ref="chart"></div>
    </div>

    <div class="row1">
      <div>物联感知</div>
    </div>

    <div class="row5">
      <div v-for="(item, index) in row5List" :key="index">
        <div>{{ item.val }}</div>
        <div>{{ item.text }}</div>
      </div>
    </div>

    <div class="row3">
      专项报警分析
    </div>

    <div class="row6">
      <div @click="leftClick"></div>
      <div ref="cont" class="cont">
        <div v-for="(item, index) in row6List" :key="index" class="item">
          <div v-for="(j, k) in item" :key="k">{{ j }}</div>
        </div>
      </div>
      <div @click="rightClick"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'VehiclesRegistrationChart',
  data() {
    return {
      echartsInstance: null,
      qsData: ['电梯', '消防', '交通', ' 燃气', '热力', '桥梁', '供水'],
      hylData: [18000, 18000, 18000, 18000, 18000, 18000, 18000],
      row5List: [
        { text: '已受理', val: 25 },
        { text: '已处置', val: 25 },
        { text: '正在处置', val: 25 },
        { text: '未处置', val: 25 }
      ],
      row6List: [
        ['燃气', '供水', '热力', '电梯'],
        ['交通', '消防', '桥梁']
      ],
      currentOpt: '本月',
      selectOptions: ['今日', '本月', '本年']
    }
  },
  mounted() {
    this.initEcharts()
  },
  beforeDestroy() {
    if (!this.echartsInstance) {
      return
    }
    this.echartsInstance.dispose()
    this.echartsInstance = null
  },
  created() {
    Math.easeInOutQuad = function(t, b, c, d) {
      t /= d / 2
      if (t < 1) return (c / 2) * t * t + b
      t--
      return (-c / 2) * (t * (t - 2) - 1) + b
    }
  },
  methods: {
    selectChange() {
      this.hylData = []
      for (let i = 0; i < 7; i++) {
        this.hylData.push(Math.floor(Math.random() * 200 + 100))
      }
      console.log(this.hylData)
      this.initEcharts()
    },
    leftClick() {
      this.animateScroll(this.$refs.cont, -356)
    },
    rightClick() {
      this.animateScroll(this.$refs.cont, 356)
    },
    animateScroll(element, change) {
      const start = element.scrollLeft
      const increment = 20
      const duration = 500
      let currentTime = 0

      const animate = () => {
        currentTime += increment
        const val = Math.easeInOutQuad(currentTime, start, change, duration)
        element.scrollLeft = val
        if (currentTime < duration) {
          setTimeout(animate, increment)
        }
      }
      animate()
    },
    async getChartData() {
      const res = await hyxxqsApi({
        pageSize: 100
      })
      if (res.success) {
        const data = res.result.data.records
        data.forEach((item) => {
          this.qsData.push(item.qs)
          this.hylData.push(item.hyl)
          this.zzlData.push(item.zzl)
        })
        this.initEcharts()
      }
    },
    async initEcharts() {
      if (!this.echartsInstance) {
        this.echartsInstance = echarts.init(this.$refs.chart)
      }

      const echartsOption = {
        color: [
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'hsla(194, 100%, 64%, 1)'
            },
            {
              offset: 1,
              color: 'hsla(214, 64%, 59%, 1)'
            }
          ])
        ],
        legend: {
          show: false,
          itemHeight: 25,
          itemWidth: 25,
          icon: 'rect',
          data: [
            {
              name: '运输量'
            }
          ],
          itemGap: 250, // 设置间距，
          left: 'center',
          bottom: 30,
          textStyle: {
            color: '#ffffff',
            fontWeight: '400',
            fontFamily: 'Microsoft YaHei',
            fontSize: 26,
            padding: [6, 0, 0, 10],
            rich: {
              a: {
                verticalAlign: 'middle'
              }
            }
          }
        },
        // 提示框
        tooltip: {
          show: true,
          trigger: 'axis',
          textStyle: { fontSize: 12 },
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 0,
          bottom: 0,
          right: 0,
          top: 30,
          containLabel: true
        },
        animation: true,
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            // x轴
            axisLabel: {
              // inside: false,
              interval: 0,
              textStyle: {
                color: '#fff',
                fontWeight: 400,
                fontFamily: 'Microsoft YaHei',
                fontSize: 12
              },
              margin: 4 // 刻度标签与轴线之间的距离。
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#669BD1',
                width: 2
              }
            },
            data: this.qsData
          }
        ],
        yAxis: [
          {
            name: '单位：次',
            nameTextStyle: {
              fontSize: 12,
              color: '#ffffff',
              align: 'center'
            },
            nameGap: 10,
            show: true,
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontWeight: 400,
                fontFamily: 'Microsoft YaHei',
                fontSize: 12
              },
              margin: 6 // 刻度标签与轴线之间的距离。
            },
            splitLine: {
              // 设置Y轴的网格线
              show: true,
              lineStyle: {
                color: '#B9F7FF',
                opacity: 0.3,
                width: 1
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#669BD1',
                width: 2
              }
            }
          }
        ],
        series: [
          {
            name: '登记数量',
            type: 'bar',
            barWidth: 16,
            data: this.hylData,
            tooltip: {
              valueFormatter: (value) => `${value}辆`
            }
          }
        ]
      }

      this.echartsInstance.setOption(echartsOption)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .row1 {
    display: flex;
    justify-content: space-between;
    & > div {
      width: 87px;
      height: 26px;
      background: url('./imgs/l-1.png') no-repeat center center / 100% 100%;
      font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
      font-weight: bold;
      font-size: 16px;
      color: #f6f9fe;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .row2 {
    display: flex;
    align-items: center;
    font-family: MicrosoftYaHeiUI;
    font-size: 16px;
    color: #f6f9fe;
    font-style: normal;
    text-transform: none;
    & > div:nth-child(1) {
      width: 153px;
      height: 101px;
      background: url('./imgs/l-2.png') no-repeat center center / 100% 100%;
      padding: 15px 0px 0 20px;
      text-wrap: nowrap;
      & > div:nth-child(2) {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #16fdf5;
        font-style: normal;
        text-transform: none;
      }
      & > div:nth-child(3) {
        font-size: 14px;
        span {
          font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
          font-weight: bold;
          font-size: 16px;
          color: #ffde00;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    & > div:nth-child(2) {
      width: 260px;
      height: 99px;
      background: url('./imgs/l-4.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px 0px 0px 10px;
      img {
        width: 47px;
        height: 46px;
      }
    }
    & > div:nth-child(3) {
      width: 153px;
      height: 101px;
      background: url('./imgs/l-3.png') no-repeat center center / 100% 100%;
      padding: 15px 20px 0 0px;
      text-wrap: nowrap;
      text-align: right;
      & > div:nth-child(2) {
        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
        font-weight: bold;
        font-size: 16px;
        color: #ffde00;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .row3 {
    width: 420px;
    height: 31px;
    background: url('./imgs/l-6.png') no-repeat center center / 100% 100%;
    font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 31px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding-left: 20px;
    margin: 10px 0px 5px 0px;
  }
  .row4 {
    height: 160px;
    margin-bottom: 10px;
    position: relative;
    .select {
      width: 70px;
      height: 20px;
      position: absolute;
      top: 0px;
      right: 10px;
      z-index: 999;
      border-radius: 4px;
      ::v-deep .el-select {
        width: 100%;
        .el-input {
          input {
            width: 100%;
            height: 20px;
            font-size: 12px;
            padding-right: 8px;
            color: #fff;
            background: transparent;

            //   font-family: Source Han Sans CN;
            //   color: hsla(222, 72%, 72%, 1);
            border: 1px solid #3e8bf2;
            //   background: rgba(255, 255, 255, 1);
            //   border-radius: 12px;
            position: relative;
          }
        }

        .el-input__suffix {
          height: auto;
          right: 5px;
          top: -8px;
        }

        .el-select-dropdown {
          // border-color: rgba(255, 255, 255, 0.4);
          border: none;
          background-color: #4e83d1;
          border-radius: 4px;
          // width: 100px;
          position: absolute !important;
          left: 0 !important;
          .el-select-dropdown__item {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: white;
          }
          .el-select-dropdown__item.selected,
          .el-select-dropdown__item:hover {
            color: rgba(5, 70, 152, 0.6);
            background: rgba(0, 255, 255, 1);
          }
          .hover {
            background-color: transparent;
          }
        }
        .el-icon-arrow-up:before {
          content: '\e78f';
          color: #3e8bf2;
          font-size: 14px;
        }
      }
    }
    .chart-content {
      width: 100%;
      height: 100%;
    }
  }
  .row5 {
    display: flex;
    margin-top: 10px;
    margin-bottom: 35px;
    & > div {
      width: 109px;
      height: 55px;
      background: url('./imgs/l-7.png') no-repeat;
      background-size: 100% 100%;
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #2ec6ff;
      text-align: center;
      font-style: normal;
      text-transform: none;
      & > div:nth-child(2) {
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
        line-height: 19px;
        font-style: normal;
        text-transform: none;
        margin-top: 30px;
      }
    }
    & > div:nth-child(2) {
      background: url('./imgs/l-8.png') no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(1) {
        color: hsla(154, 98%, 54%, 1);
      }
    }
    & > div:nth-child(3) {
      background: url('./imgs/l-9.png') no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(1) {
        color: hsla(52, 100%, 50%, 1);
      }
    }
    & > div:nth-child(4) {
      background: url('./imgs/l-10.png') no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(1) {
        color: hsla(0, 99%, 65%, 1);
      }
    }
  }
  .row6 {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 37px;
    & > div:nth-child(1),
    & > div:nth-child(3) {
      width: 18px;
      height: 22px;
      background-size: 100% 100% !important;
      cursor: pointer;
    }
    & > div:nth-child(1) {
      background: url('./imgs/l-12.png') no-repeat;
    }
    & > div:nth-child(3) {
      background: url('./imgs/l-18.png') no-repeat;
    }
    .cont {
      width: 356px;
      overflow: hidden;
      display: flex;
      transform: all 3s;
    }
    .item {
      width: 356px;
      display: flex;
      & > div {
        width: 79px;
        margin: 0 5px;
        height: 37px;
        line-height: 37px;
        text-align: center;
        background: url('./imgs/l-11.png') no-repeat;
        background-size: 100% 100%;
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
}
</style>
